<template>
	<uni-popup ref="detail" type="center" :isTopOffset="true" :maskClick="false" showClose>
		<view class="wish-detail-popup">
			<view class="popup-title">心愿详情</view>
			<view class="popup-sub-title" v-if="isFree">本心愿为#新用户首次支持免费#心愿</view>
			<view class="popup-content-wrap">
				<view class="popup-content">
					<image :src="info.goods_img_url" mode="aspectFill" class="goods-img"></image>
					<view class="wish-detail-info">
						<view class="goods-name">
							{{info.goods_name}}
						</view>
						<view class="info-item">
							{{info.platform_name}}：<text class="red">¥{{info.platform_price}}</text>
						</view>
						<view class="info-item">
							所需支持人数：<text class="red">{{info.need_people}}</text>
						</view>
						<view class="info-item">
							每人支持金额：<text class="red">¥{{info.need_pay_money}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'
export default{
	components:{
		uniPopup
	},
	props:{
		isFree:Boolean
	},
	data(){
		return{
			info:{}
		}
	},
	methods:{
		async open({id,info}){
			if(id){
				this.info=await this.getInfo(id)
			}else{
				this.info=info
			}
			this.$refs.detail.open()
		},
		close(){
			this.$refs.detail.close()
		},
		async getInfo(id){
			let data = await this.$api.getWishDetail({group_id:id})
			return data.wish_info
		}
	}
}
</script>

<style lang="scss" scoped>
.wish-detail-popup{
	width: 600rpx;
	padding: 50rpx 30rpx 80rpx;
	background-color: #fff;
	border-radius: 10rpx;
	.popup-title{
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		color:#E7404A;
	}
	.popup-sub-title{
		font-size: 30rpx;
		text-align: center;
		color:#E7404A;
		margin-top: 30rpx;
	}
	.popup-content-wrap{
		display: flex;
		justify-content: center;
		margin-top: 50rpx;
	}
	.popup-content{
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}
	.goods-img{
		width: 200rpx;
		height: 200rpx;
		margin-right: 20rpx;
		border-radius: 4rpx;
	}
	.wish-detail-info{
		flex:1;
		overflow: hidden;
	}
	.goods-name{
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 12rpx;
		min-height: 70rpx;
	}
	.info-item{
		font-size: 22rpx;
		.red{
			color:#E7404A;
		}
		&:not(:last-child){
			margin-bottom: 8rpx;
		}
	}
}
</style>
